<template>
  <div class="home-container">
    <div class="home-header">
      SIK 博客
      <div class="link">
        <a href="#link"></a>
      </div>
    </div>
    <div class="home-main">
      <p id="link"></p>
      <div class="main-center">
        <!-- 左侧文章列表 -->
        <el-row class="main-left">
          <el-col style="width: 887px">
            <el-card
              style="
                width: 887px;
                height: 280px;
                border-radius: 15px;
                margin-bottom: 15px;
              "
              v-for="(item, index) in articleData"
              :key="item.id"
              class="article-card"
            >
              <!-- 文章 -->
              <!-- 文章封面 -->
              <div style="width: 887px; height: 280px; display: flex">
                <div :class="isRight(index)">
                  <router-link :to="'/home/article/details/' + item.id">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item.article_pic ? baseUrl + item.article_pic : ''"
                      fit="cover"
                      class="on-hover"
                    >
                      <div slot="error" class="image-slot">
                        <i
                          style="font-size: 40px; line-height: 280px"
                          class="el-icon-picture-outline"
                        ></i>
                      </div>
                    </el-image>
                  </router-link>
                </div>
                <!-- 文章信息 -->
                <div class="article-info" style="width: 55%; padding: 40px">
                  <div>
                    <router-link :to="'/home/article/details/' + item.id">
                      {{ item.article_title }}
                    </router-link>
                  </div>
                  <!-- 更新时间和文章分类 -->
                  <div style="font-size: 14px; color: #858585; margin: 15px 0">
                    <!-- 时间 -->
                    <el-divider direction="vertical"></el-divider>
                    <i class="el-icon-date"></i>
                    {{ item.article_createdTime }}
                    <el-divider direction="vertical"></el-divider>
                    <!-- 分类 -->
                    <i class="el-icon-files"></i>
                    {{ item.name }}
                    <el-divider direction="vertical"></el-divider>
                  </div>
                  <!-- 文章内容 -->
                  <div class="article-content">
                    {{ item.article_content }}
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!-- 右侧站点信息 -->
        <div
          v-if="vWidth > 1180"
          :class="['main-right', isFixTab ? 'fixedNavbar' : '']"
        >
          <el-card
            style="
              height: 280px;
              border-radius: 15px;
              margin-bottom: 15px;
              padding: 15px 20px;
            "
          >
            <div>
              <div class="blog-logo" style="margin-top: 15px">
                <el-avatar :size="80" class="author-avatar" src="/logo.JPG">
                </el-avatar>
                <div style="font-size: 24px; margin: 15px 0">SIK</div>
                <div style="font-size: 14px; margin-bottom: 15px">
                  we are SIK
                </div>
              </div>
              <div class="blog-info" style="height: 100px">
                <div style="flex: 1">
                  <div style="height: 28px; font-size: 14px">文章</div>
                  <div style="height: 40px; font-size: 20px; line-height: 40px">
                    {{ totalArticle }}
                  </div>
                </div>
                <div style="flex: 1">
                  <div style="height: 28px; font-size: 14px">分类</div>
                  <div style="height: 40px; font-size: 20px; line-height: 40px">
                    {{ totalSort }}
                  </div>
                </div>
                <div style="flex: 1">
                  <div style="height: 28px; font-size: 14px">浏览量</div>
                  <div style="height: 40px; font-size: 20px; line-height: 40px">
                    {{ totalViews }}
                  </div>
                </div>
              </div>
            </div>
          </el-card>
          <el-card
            style="
              height: 350px;
              border-radius: 15px;
              margin-bottom: 15px;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <!-- <div id="he-plugin-standard"></div> -->
            <Weather></Weather>
          </el-card>
          <el-card
            style="height: 350px; border-radius: 15px; margin-bottom: 15px"
          >
            <el-calendar v-model="value"></el-calendar>
          </el-card>
        </div>
      </div>
    </div>
  </div>
  <!-- </el-main> -->
  <!-- </div> -->
  <!-- </el-container> -->
</template>

<script>
import Weather from "@/components/Weather";
export default {
  name: "Article",
  components: {
    Weather,
  },
  computed: {
    isRight() {
      return function (index) {
        if (index % 2 == 0) {
          return "article-cover left-radius";
        }
        return "article-cover right-radius";
      };
    },
  },
  data() {
    return {
      value: new Date(),
      //文章数据
      baseUrl: "http://127.0.0.1:3000/",
      articleData: [],
      //文章总条数
      totalArticle: null,
      totalViews: 0,
      //是否固定站点信息模块
      isFixTab: false,
      //可视窗口 实时高度、宽度
      vHeight: null,
      vWidth: null,
      //滚动条滚动时，距离顶部的距离
      scrollY: null,
      //文档总高度
      height: null,
      //默认加载一份
      page: 1,
      //默认加载一份的文章数量
      size: 5,
      //滚动条是否到达底部的标志
      isAchiveBottom: false,
      //文章分类数
      totalSort: 0,
    };
  },
  mounted() {
    this.getArticle();
    this.getSort();
    window.addEventListener("scroll", this.handleScroll);

    //页面跳转后，重置滚动条的距离为（0，0）
    this.$router.afterEach((to, from, next) => {
      window.scrollTo(0, 0);
    });

    //项目启动时 获取可视窗口的高度
    /* 在HTML 中, body 是整个DOM 的根, 而在XHTML 中, document 才是根,
    body 不再是根, 所以取body 的属性时, 不能再取到整个页面的值 */
    // console.log(document.body.clientHeight);//HTML
    // this.vHeight = document.documentElement.clientHeight; //XHTML

    // /* 项目启动后，窗口变化时 获取可视窗口的大小，这里我们只需要高度 */
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.documentElement.clientWidth; //实时宽度
        // window.screenHeight = document.documentElement.clientHeight; //实时高度
        that.screenWidth = window.screenWidth;
        //可视窗口宽度
        this.vWidth = that.screenWidth;
      })();
    };
  },
  methods: {
    //获取文章数据
    getArticle() {
      this.$http
        .get("/article/getArticle", {
          params: { page: this.page },
        })
        .then((res) => {
          if (res.code == 0) {
            // console.log(res);
            this.articleData.push(...res.result.rows);
            this.totalArticle = res.result.total;
            // console.log(res.result.rows);
            res.result.rows.forEach((item) => {
              // console.log(item.article_views);
              this.totalViews += item.article_views;
            });
          }
        });
    },
    getSort() {
      this.$http.get("/category/getName").then((res) => {
        if (res.code == 0) {
          res.result.forEach((item) => {
            this.totalSort++;
          });
        }
      });
    },
    //设置站点信息框的位置，超过一定距离固定在页面中
    handleScroll() {
      //获取可视窗口的高度、宽度
      this.vHeight = document.documentElement.clientHeight;
      this.vWidth = document.documentElement.clientWidth;
      //获取文档高度
      this.height = document.documentElement.scrollHeight;
      //获取滚动条到顶部的位置
      this.scrollY = Math.ceil(document.documentElement.scrollTop);
      // console.log(33);
      // console.log(this.scrollY);
      if (this.vHeight) {
        if (this.scrollY >= this.vHeight) {
          this.isFixTab = true;
        } else {
          this.isFixTab = false;
        }
      }
      // console.log(this.vHeight, "+", this.scrollY, "=", this.height);
      // console.log(this.articleData.length);
      if (
        this.vHeight + this.scrollY >= this.height &&
        !this.isAchiveBottom &&
        this.articleData.length < this.totalArticle
      ) {
        // console.log("到底部了");
        this.isAchiveBottom = true;
        setTimeout(() => {
          this.page += 1;
          this.getArticle();
          this.isAchiveBottom = false;
        }, 500);
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.home-container
  width calc(100vw - 17px)
  overflow :hidden
  .home-header
    min-height 100vh;
    background url("~@/assets/images/1649232930180.png") center center no-repeat;
    background-size 100% 100%;
    color white
    font-size 45px
    font-weight 700
    user-select: none
    text-align center
    height calc(100vh - 60px)
    line-height calc(100vh - 120px)
    .link
      &>a
        display: block
        margin: 50px auto 0
        width: 35px
        height: 35px
        cursor: pointer
        background: url("~@/assets/images/jiantouxia.svg")
        animation: run 1.3s infinite
  @keyframes run{
    0%{
      transform: translateY(0)
      opacity: 1
    }
    50%{
      transform: translateY(20px)
      opacity: 0.1
    }
    100%{
      transform: translateY(0)
      opacity: 1
    }
  }
  .home-main
    background: -webkit-linear-gradient(left,rgb(254, 244, 234), rgb(219, 234, 234))
    color: #333;
    min-height: 100vh
    padding: 0
    padding-top: 20px
    .main-center
      width: 1180px
      height: 100%
      margin: 0 auto
      text-align: center
      display: flex
      justify-content: space-between
      min-width: 300px
      .main-left
        .article-card
          &>>>.el-card__body
            height: 280px
          .on-hover
            transition: all 0.6s
          &:hover
            box-shadow 0 0 20px 10px #ccc
          &:hover .on-hover
            transform: scale(1.1)
      .main-right
        width 280px
        .el-card
          &:hover
            box-shadow 0 0 20px 10px #ccc
          .blog-info
            display flex
            justify-content space-evenly
            align-items: center
            font-size 18px
</style>
<style lang="stylus">
body,html
  scroll-behavior: smooth
//站点信息固定样式
.fixedNavbar
  position fixed
  z-index 1
  top 0
  right calc(50vw - 599px);
  padding-top 20px
</style>
<style scoped>
.article-cover {
  overflow: hidden;
  height: 100%;
  width: 52%;
}
.left-radius {
  border-radius: 8px 0 0 8px !important;
  order: 0;
}
.right-radius {
  border-radius: 0 8px 8px 0 !important;
  order: 1;
}
.article-content {
  width: 414.81px;
  line-height: 1.8;
  color: #4c4948;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.article-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.article-info a {
  text-decoration: none;
  text-align: left;
  font-size: 26px;
  color: #4c4948;
  transition: all 0.3s;
}
.article-info a:hover {
  color: #8e8cd8;
}
.author-avatar {
  transition: all 0.7s;
}
.author-avatar:hover {
  transform: rotate(360deg);
}
/* 首页日历样式 */
.el-calendar >>> .el-calendar-day {
  /* 日历单个小方框的高度 */
  height: 30px;
}
.el-card >>> .el-card__body {
  /* 日历整体的内边距 */
  padding: 0;
}
.el-calendar >>> .el-calendar__header {
  /* 日历头部的布局设置 */
  flex-direction: column;
}
.el-calendar >>> .el-calendar__button-group {
  /* 上下月份按钮组 的内上边距 */
  padding-top: 15px;
}
</style>
